<template>
  <div class="login">
    <div>
      <Header>登录</Header>
      <div class="login-main">
        <div class="login-tel">
          <input type="text" v-model="userTel" placeholder="请输入手机号" />
        </div>
        <div class="login-verif">
          <input type="text" v-model="code" placeholder="请输入短信验证码" />
          <button
            :disabled="disabled"
            class="login-verif-btn"
            :class="{ 'disabled-btn': disabled }"
            @click="getCode"
          >
            {{ codeMsg }}
          </button>
        </div>
        <div class="login-btn" @click="login">登录</div>
        <div class="login-more">
          <div @click="goPwdLogin">密码登录</div>
          <div @click="goRegister">快速注册</div>
        </div>
      </div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/views/login/components/Header.vue";
import { Toast } from "mint-ui";
import { mapMutations } from "vuex";

export default {
  name: "Login",
  data() {
    return {
      disabled: false,
      codeMsg: "获取短信验证码",
      countDown: 6,
      userTel: "",
      code: "",
      realCode: "",
      rules: {
        userTel: {
          rule: /^1[3456789]\d{9}$/,
          msg: "手机号不能为空，并且为11位数字",
        },
        // code: {
        //   rule: /^\s*$/,
        //   msg: "验证码不能为空",
        // },
        code: {
          rule: /^\d{4}$/,
          msg: "验证码不能为空，并且为4位数字",
        },
      },
    };
  },
  components: {
    Header,
  },
  methods: {
    ...mapMutations('user', ['userLogin']),
    async getCode() {
      if (!this.validate("userTel")) return;

      //获取验证码
      let res = await this.$http.getVerificationCode(this.userTel);
      if (res.code == 200) {
        this.realCode = res.data;
      }

      this.disabled = true;
      let timer = setInterval(() => {
        --this.countDown;
        this.codeMsg = `重新发送(${this.countDown})`;
      }, 1000);

      setTimeout(() => {
        clearInterval(timer);
        this.disabled = false;
        this.codeMsg = "获取短信验证码";
        this.countDown = 6;
      }, 6000);
    },
    async login() {
      if (!this.validate("userTel")) return;
      if (!this.validate("code")) return;
      if (this.code != this.realCode) {
        Toast("验证码不正确");
        return;
      }
      //存储/注册用户
      let res = await this.$http.saveUser({ tel: this.userTel });
      if (res.code == 200) {
        Toast("登录成功");
        //存储用户信息
        this.userLogin(res.data);
        //跳转from页面
        this.$router.replace("/my");
      }
    },
    goPwdLogin() {
      this.$router.push("/pwdlogin");
    },
    goRegister() {
      this.$router.push("/register");
    },
    validate(key) {
      let flag = true;
      if (!this.rules[key].rule.test(this[key])) {
        flag = false;
        Toast(this.rules[key].msg);
      }
      return flag;
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  .login-main {
    padding: 0.5333rem;

    .login-tel {
      width: 100%;
      height: 1.1733rem;

      input {
        outline: none;
        border: none;
        height: 100%;
        width: 100%;
        font-size: 0.4267rem;
        padding-left: 0.2667rem;
      }
    }
    .login-verif {
      width: 100%;
      height: 1.1733rem;

      input {
        outline: none;
        border: none;
        height: 100%;
        width: 60%;
        font-size: 0.4267rem;
        padding-left: 0.2667rem;
      }

      .login-verif-btn {
        display: inline-block;
        background-color: #b0352f;
        color: #fff;
        font-size: 0.3733rem;
        width: 40%;
        height: 1.2rem;
        line-height: 1.2rem;
        text-align: center;
        border-radius: 0.08rem;
        border: none;
      }

      .disabled-btn {
        background-color: #eee;
        color: #848689;
      }
    }

    .login-btn {
      background-color: #b0352f;
      width: 100%;
      height: 1.1733rem;
      color: #fff;
      text-align: center;
      line-height: 1.1733rem;
      font-size: 0.4267rem;
      border-radius: 0.08rem;
    }
    .login-more {
      font-size: 0.32rem;
      display: flex;
      justify-content: space-between;
    }
  }
  .login-main > div {
    margin-bottom: 0.5333rem;
  }
}
</style>